import { DescriptionsType } from '@/components/DescriptionsType';
import ScrollBarLayout from '@/components/ScrollBarLayout';
import Cls from 'classnames';
import { useContext, useMemo } from 'react';
import { ConractControllerContext } from '../common';
import { contractInfoEffect, effectMainContract, getBreakUpdateDes, ntkoQueryParams } from '../mconfig';
import { getKeyRouter, wordHandChildParam, getFileNameByPath } from '@/utils';
import { NtkoPlugin } from '@/common/NtkoPluginType';
import { history } from 'umi';
import { getBaseUrl } from '@/services/urlconst';
import { TypographyTitle } from '@/components/Typography/TypographyTitle';
import { useDescriptions, Descriptions } from '@/components/Descriptions';
import { EyeOutlined } from '@ant-design/icons';

export const DetailInfoCenterViewBreakOA: React.FC = () => {
  /** 获取上下文 */
  const {
    styleFixCls,
    curRes,
    contractDetailInfo,
    oldContractInfo,
    contractForm,
    contarctJsonList,
    locationState,
    locationProps,
    contractDispatch,
    readReadShowFileRun,
  } = useContext(ConractControllerContext);

  /** 引入在线预览 */
  const ntkoBrowser = useMemo(() => {
    const { ntkoBrowser } = NtkoPlugin(() => {});
    return ntkoBrowser;
  }, []);

  /** 点击在线预览文件 */
  const onNtkoReadWord = (urlName: string, urlObj: Record<string, any>, onlyRead?: boolean) => {
    const { ntkoWordUrl } = ntkoQueryParams(urlObj, curRes, urlName, onlyRead);

    const childStr = wordHandChildParam(urlObj);

    const extensBool = ntkoBrowser.ExtensionInstalled();
    if (extensBool) {
      ntkoBrowser?.openWindow(ntkoWordUrl, false, '', childStr);
    }
  };

  /** 初始化原数据 */
  effectMainContract(oldContractInfo, contractForm, {}, () => {}, contractDispatch, contarctJsonList, contractDetailInfo);

  /** 初始化数据 */
  contractInfoEffect(contractDetailInfo, contractForm);

  /** 打开oa办理页面 */
  const openContractOA = () => {
    history.push({
      pathname: `/contractController/taskDataGrid/{paramValue}/{params}/:${getKeyRouter()}${getKeyRouter()}`,
      state: {
        pageType: 'detail',
        id: contractDetailInfo?.id,
        pageInfo: {
          pID: contractDetailInfo?.pID ? contractDetailInfo?.pID : null,
          id: contractDetailInfo?.pID ? contractDetailInfo?.pID : null,
          procInstID: locationState?.pageInfo?.procInstID,
        },
        pIDDetailInfo: {
          ...contractDetailInfo,
          id: contractDetailInfo?.id ? contractDetailInfo?.id : null,
          pID: contractDetailInfo?.pID ? contractDetailInfo?.pID : null,
          contractCode: contractDetailInfo?.busi_contractCode,
        },
        jumpType: 'pageRouterOA',
      },
    });
  };

  //打开原合同详情
  const openOldContractDetail = () => {
    history.push({
      pathname: `/contractController/getMcontractByID/:${getKeyRouter()}${getKeyRouter()}`,
      state: {
        pageType: 'detail',
        id: oldContractInfo?.id,
        // oldModifyType: true,
        pageInfo: oldContractInfo,
        pIDDetailInfo: {
          ...oldContractInfo,
        },
        returnPathName: locationProps?.returnPathName,
      },
    });
  };

  //打开解除合同详情
  const openBreakContractDetail = () => {
    history.push({
      pathname: `/contractController/getMcontractByID/:${getKeyRouter()}${getKeyRouter()}`,
      state: {
        pageType: 'detail',
        id: contractDetailInfo?.id,
        // oldModifyType: true,
        pageInfo: contractDetailInfo,
        pIDDetailInfo: {
          ...oldContractInfo,
        },
        returnPathName: locationProps?.returnPathName,
      },
    });
  };

  /**轻阅读预览 */
  const onOpenReadOfdWord = (fieldUrl: string) => {
    readReadShowFileRun({ fieldPath: `${getBaseUrl()}${fieldUrl}` });
  };

  /** 获取表格配置 */
  const { config } = getBreakUpdateDes({
    openOldContractInfo: openContractOA,
    onNtkoReadWord,
    isSeeOldContract: true,
    onOpenReadOfdWord,
  });

  // 表格表单配置信息
  const [BasicConfig] = useDescriptions({
    labelWidth: 200,
    basicForm: contractForm,
    schemas: [
      {
        label: '申请日期',
        field: 'createTime',
        component: 'Input',
        placeholder: '自动带出',
        disabled: true,
      },
      {
        label: '申请部门/单位',
        field: 'createDepartmentName',
        component: 'Input',
        placeholder: '自动带出',
        disabled: true,
      },
      {
        label: '申请人',
        field: 'contactName',
        component: 'Input',
        placeholder: '自动带出',
        disabled: true,
      },
      {
        label: '联系电话',
        field: 'phoneMobile',
        component: 'Input',
        placeholder: '自动带出',
        disabled: true,
      },
    ],
  });
  // 表格表单配置信息
  const [ReConfig] = useDescriptions({
    labelWidth: 200,
    basicForm: contractForm,
    schemas: [
      {
        field: `oldContractName`,
        label: `原合同名称`,
        component: 'Input',
        placeholder: '请输入原合同名称',
        disabled: true,
        contentAfter: (
          <a onClick={openOldContractDetail}>
            <EyeOutlined />
          </a>
        ),
      },
      {
        field: `oldContractCode`,
        label: `原合同编号`,
        component: 'Input',
        disabled: true,
        placeholder: '自动生成',
      },
      {
        field: `contractName`,
        label: `解除合同名称`,
        component: 'Input',
        placeholder: '请输入变更合同名称',
        disabled: true,
        contentAfter: (
          <a onClick={openBreakContractDetail}>
            <EyeOutlined />
          </a>
        ),
      },
      {
        field: `contractCode`,
        label: `解除合同编号`,
        component: 'Input',
        placeholder: '自动带出',
        disabled: true,
      },
      {
        field: `contractURL`,
        label: `解除协议`,
        component: 'Render',
        colSpan: 2,
        slotRender: (text: any) => {
          const contractName = text ? getFileNameByPath(text) : '';
          return (
            <div style={{ width: '100%', display: 'flex', justifyContent: 'space-between', padding: 10 }}>
              {contractName ? (
                <>
                  <a>{contractName}</a>
                  <a
                    onClick={() => {
                      onOpenReadOfdWord(contractDetailInfo?.contractURL);
                    }}
                  >
                    <EyeOutlined />
                  </a>
                </>
              ) : (
                <span>--</span>
              )}
            </div>
          );
        },
      },
      {
        field: `changeContent`,
        label: `解除合同原因`,
        component: 'InputTextArea',
        placeholder: '--',
        colSpan: 2,
        allowClear: true,
        showCount: true,
        maxLength: 800,
        disabled: true,
        autoSize: { minRows: 5, maxRows: 8 },
      },
    ],
  });

  return (
    <>
      <div className="commonTabsBodyDom">
        <div className={Cls('tabsBodyInfoDom', `${styleFixCls}updateFormBox`)}>
          <ScrollBarLayout style={{ padding: '5px 100px' }}>
            {/* <div className={`${styleFixCls}infoViewOA-centerBodyTitleBox`}>解除合同申请</div> */}

            <TypographyTitle children={'解除合同申请'} style={{ textAlign: 'center', borderLeft: 'none' }} level={3} />
            <TypographyTitle children={'基本信息'} style={{ margin: '15px 0' }} />
            <Descriptions config={BasicConfig} />

            <TypographyTitle children={'解除合同信息'} style={{ margin: '15px 0' }} />
            <Descriptions config={ReConfig} />

            {/* <DescriptionsType config={config} titleType={true} /> */}
          </ScrollBarLayout>
        </div>
      </div>
    </>
  );
};
